<template>
  <div id="positionnav">
    <div class="container">
      <div id="position">
        您的位置：<router-link
          v-for="(item, index) in emoArr"
          :key="index"
          :to="{ path: item.path, query: { tab: item.tab } }"
        >
          <i v-if="index !== 0" class="fa fa-angle-right"></i>{{ item.name }}
        </router-link>
      </div>
      <div class="rynav" v-if="isShowTab">
        <ul>
          <li v-for="(item, index) in tabArr" :key="index">
            <router-link
              :class="{ sel: index + 1 == tab }"
              :to="{ path: pathName, query: { tab: item.tab } }"
              >{{ item.title }}</router-link
            >
          </li>
        </ul>
      </div>
      <slot></slot>
      <div class="clearfix"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      emoArr: [{ name: this.$t('nav_home'), path: '/' }],
      tabArr: [],
      // curTab: 1
    }
  },
  props: {
    pathName: {
      type: String,
      default: ''
    },
    tab: {
      type: Number,
      default: 1
    },
    isShowTab: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    tab() {
      this.renderView()
    }
  },
  mounted() {
    this.renderView()
  },
  methods: {
    renderView() {
      let type = this.pathName
      switch (type) {
        case '/about':
          this.tabArr = [{ title: this.$t('about_the_institute'), tab: 1 }, { title: this.$t('message_from_the_directors'), tab: 2 }]
          this.emoArr = [
            { name: this.$t('nav_home'), path: '/' },
            { name: this.$t('nav_about'), path: '/about' },
            { name: this.tabArr[this.tab - 1].title, path: '/about', query: { tab: this.tab } }
          ]
          break;
        case '/people':
          // this.tabArr = [{ title: this.$t('directors'), tab: 1 }, { title: this.$t('advisory_board'), tab: 2 }, { title: this.$t('researchers'), tab: 3 }]
          this.tabArr = [{ title: this.$t('directors'), tab: 1 }, { title: this.$t('advisory_board'), tab: 2 }]
          this.emoArr = [
            { name: this.$t('nav_home'), path: '/' },
            { name: this.$t('nav_people'), path: '/people' },
            { name: this.tabArr[this.tab - 1].title, path: '/about', query: { tab: this.tab } }
          ]
          break;
        case '/new':
          this.tabArr = [{ title: this.$t('nav_new'), tab: 1 }]
          this.emoArr = [
            { name: this.$t('nav_home'), path: '/' },
            { name: this.$t('nav_new'), path: '/new' },
          ]
          break;
        case '/research':
          this.tabArr = [{ title: this.$t('projects'), tab: 1 }, { title: this.$t('publications'), tab: 2 }]
          this.emoArr = [
            { name: this.$t('nav_home'), path: '/' },
            { name: this.$t('nav_research'), path: '/research' },
            { name: this.tabArr[this.tab - 1].title, path: '/research', query: { tab: this.tab } }
          ]
          break;
        case '/recruitment':
          this.tabArr = []
          this.emoArr = [
            { name: this.$t('nav_home'), path: '/' },
            { name: this.$t('nav_recruitment'), path: '/recruitment' },
          ]
          break;
        case '/reserve':
          this.tabArr = []
          this.emoArr = [
            { name: this.$t('nav_home'), path: '/' },
            { name: this.$t('nav_reserve'), path: '/reserve' },
          ]
          break;
        case '/laboratory':
          this.tabArr = [{ title: this.$t('nav_laboratory'), tab: 1 }]
          this.emoArr = [
            { name: this.$t('nav_home'), path: '/' },
            { name: this.$t('nav_laboratory'), path: '/laboratory' },
          ]
          break;

        default:
          break;
      }
    }
  },
}
</script>

<style scoped>
#ny-banner {
  width: 100%;
  overflow: hidden;
}

.ny-banner-box {
  width: 100%;
  position: relative;
}

.ny-banner-box > img {
  width: 100%;
}

#positionnav {
  margin-top: 40px;
}

#positionnav .container {
  position: relative;
}

.rynav {
  position: relative;
  width: 100%;
  height: 32px;
}

.rynav ul {
  margin-left: -5px;
  margin-right: -5px;
}

.rynav li {
  padding-left: 5px;
  padding-right: 5px;
  float: left;
}

.rynav li a {
  height: 32px;
  display: inline-block;
  padding: 0px 20px;
  transition: all 0.3s ease-out 0s;
  position: relative;
  color: #737373;
}

.rynav li a.sel {
  /* background-color: #233876; */
  background: linear-gradient(to right,#00CCFF, #32CC68);
  color: #fff;
}

.rynav li a:hover {
  /* background-color: #233876; */
  background: linear-gradient(to right,#00CCFF, #32CC68);

  color: #fff;
}

#position {
  width: 300px;
  font-size: 12px;
  display: block;
  position: absolute;
  right: 15px;
  text-align: right;
  top: 8px;
}

#position a {
  color: #999;
}

#position i {
  margin: 0 10px;
  color: #6f6f6f;
}

#position .container > a:last-child {
  color: #233876;
}

@media (max-width: 1024px) {
  #positionnav {
    margin-top: 5px;
  }

  #position {
    position: relative;
    width: 100%;
    display: block;
    right: 0;
  }

  .rynav {
    position: relative;
    width: 100%;
    display: block;
    margin-top: 22px;
  }

  .rynav li {
    margin-bottom: 3px;
    letter-spacing: 1px;
  }
}
</style>